<template>
  <div class="mall-container">
    <!-- 顶部导航栏 -->
    <header class="mall-header">
      <div class="header-top">
        <div class="container">
          <div class="top-left">
            <span>欢迎来到在线商城！</span>
          </div>
          <div class="top-right">
            <template v-if="userInfo">
              <span>您好，{{ userInfo.nickname || userInfo.username }}</span>
              <el-divider direction="vertical" />
              <el-dropdown @command="handleCommand">
                <span class="user-dropdown">
                  个人中心 <el-icon><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                    <el-dropdown-item command="orders">我的订单</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <router-link to="/login" class="top-link">登录</router-link>
              <el-divider direction="vertical" />
              <router-link to="/register" class="top-link">注册</router-link>
            </template>
          </div>
        </div>
      </div>
      
      <div class="header-main container">
        <div class="logo">
          <router-link to="/userWeb/index">
            <h1>在线商城</h1>
          </router-link>
        </div>
        
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="请输入商品名称"
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button @click="handleSearch">
                <el-icon><Search /></el-icon> 搜索
              </el-button>
            </template>
          </el-input>
        </div>
        
        <div class="header-actions">
          <router-link to="/userWeb/cart" class="cart-link">
            <el-badge :value="cartCount" :hidden="cartCount === 0" class="cart-badge">
              <el-icon :size="26"><ShoppingCart /></el-icon>
            </el-badge>
            <span>购物车</span>
          </router-link>
        </div>
      </div>
      
      <div class="header-nav">
        <div class="container nav-container">
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/userWeb/index" :class="{ active: $route.path === '/userWeb/index' }">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/userWeb/products" :class="{ active: $route.path === '/userWeb/products' }">商品</router-link>
            </li>
            <li v-for="category in categoryList" :key="category.id" class="nav-item">
              <router-link :to="`/userWeb/category/${category.id}`" :class="{ active: $route.path === `/userWeb/category/${category.id}` }">
                {{ category.name }}
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="mall-main container">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </main>

    <!-- 底部信息 -->
    <footer class="mall-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于我们</h3>
            <p>在线商城是一个提供多种商品的综合购物平台，致力于为用户提供优质的购物体验。</p>
          </div>
          <div class="footer-section">
            <h3>快速链接</h3>
            <ul>
              <li><router-link to="/userWeb/index">首页</router-link></li>
              <li><router-link to="/userWeb/profile">个人中心</router-link></li>
              <li><router-link to="/userWeb/orders?showList=true">我的订单</router-link></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>电话：123-456-7890</p>
            <p>邮箱：support@onlinemall.com</p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>Copyright © 2023 在线商城 All Rights Reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'UserWebLayout'
}
</script>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Search, ShoppingCart, ArrowDown } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();
const userInfo = ref(null);
const searchKeyword = ref('');
const categoryList = ref([]);
const cartCount = ref(0);

// 处理用户下拉菜单选择
const handleCommand = (command) => {
  switch(command) {
    case 'profile':
      router.push('/userWeb/profile');
      break;
    case 'orders':
      router.push('/userWeb/orders?showList=true');
      break;
    case 'logout':
      ElMessageBox.confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除登录信息
        sessionStorage.removeItem('user');
        userInfo.value = null;
        ElMessage.success('已成功退出登录');
        router.push('/login');
      }).catch(() => {});
      break;
  }
};

// 处理搜索
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/userWeb/products',
      query: { keyword: searchKeyword.value.trim() }
    });
  }
};

// 获取购物车数量
const fetchCartCount = async () => {
  // 如果用户已登录，获取购物车数量
  if (userInfo.value) {
    try {
      // 实际项目中替换为真实API
      cartCount.value = 0;
    } catch (error) {
      console.error('获取购物车数量失败:', error);
    }
  } else {
    cartCount.value = 0;
  }
};

onMounted(() => {
  // 获取用户信息
  const userStr = sessionStorage.getItem('user');
  if (userStr) {
    try {
      userInfo.value = JSON.parse(userStr);
    } catch (e) {
      console.error('解析用户信息失败', e);
      sessionStorage.removeItem('user');
    }
  }
  
  // 获取购物车数量
  fetchCartCount();
});
</script>

<style scoped>
/* 全局样式 */
.mall-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 头部样式 */
.mall-header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-top {
  background-color: #f0f0f0;
  padding: 8px 0;
  font-size: 12px;
}

.header-top .container {
  display: flex;
  justify-content: space-between;
}

.top-right {
  display: flex;
  align-items: center;
}

.top-link {
  color: #333;
  text-decoration: none;
  margin-left: 10px;
}

.top-link:hover {
  color: #409EFF;
}

.header-main {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.logo h1 {
  margin: 0;
  font-size: 28px;
  color: #409EFF;
}

.search-box {
  flex: 1;
  margin: 0 30px;
}

.header-actions {
  display: flex;
}

.cart-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.cart-link:hover {
  color: #409EFF;
}

.header-nav {
  background-color: #409EFF;
  padding: 0;
}

.nav-container {
  position: relative;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.nav-item {
  position: relative;
}

.nav-item a {
  display: block;
  padding: 12px 24px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.nav-item a:hover, .nav-item a.active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 主内容区样式 */
.mall-main {
  flex: 1;
  padding: 20px 0;
}

/* 底部样式 */
.mall-footer {
  background-color: #333;
  color: #fff;
  padding: 40px 0 0;
  margin-top: 40px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-section {
  flex: 1;
  min-width: 200px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.footer-section h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #bbb;
  text-decoration: none;
}

.footer-section ul li a:hover {
  color: #409EFF;
}

.footer-bottom {
  padding: 15px 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
}

.user-dropdown {
  cursor: pointer;
  color: #333;
}

.user-dropdown:hover {
  color: #409EFF;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 